<template>
	<div class="system-staff-container">
		<el-dialog v-model="state.isShowDialog" :fullscreen="true" width="769px" center>
			<template #title>
				<div style="font-size: large; border-radius: 0 !important" v-drag="['.system-staff-container', '.system-staff-container .el-dialog__header']">
					{{ title }}
				</div>
			</template>
			<el-space style="margin-top: 40px; margin-bottom: 20px" direction="vertical">
				<el-text tag="b">基本信息</el-text>
			</el-space>
			<div class="row">
				<div>姓名：{{ state.ruleForm.name }}</div>
				<div>用户性别：{{ state.sex }}</div>
				<div>生日：{{ state.ruleForm.birthday && formatWithDate(state.ruleForm.birthday) }}</div>
			</div>
			<div class="row">
				<div>婚姻状态：{{ state.isMarriage }}</div>
				<div>政治面貌：{{ state.ruleForm.politicalOutlook }}</div>
				<div>国籍（地区）：{{ state.ruleForm.nation }}</div>
			</div>
			<div class="row">
				<div>户籍地址：{{ state.ruleForm.registeredAddress }}</div>
			</div>

			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">身份证件</el-text>
			</el-space>
			<div class="row">
				<div>证件类型：{{ state.idType }}</div>
				<div>证件号码：{{ state.ruleForm.idCard }}</div>
				<div>证件有效期起：{{ state.ruleForm.validStart && formatWithDate(state.ruleForm.validStart) }}</div>
			</div>
			<div class="row">
				<div>证件有效期止：{{ state.ruleForm.validEnd && formatWithDate(state.ruleForm.validEnd) }}</div>
				<div>证件正面：</div>
				<div>证件反面：</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">护照信息</el-text>
			</el-space>
			<div class="row">
				<div>护照英文名：{{ state.ruleForm.passportName }}</div>
				<div>护照有效期起：{{ state.ruleForm.passportValidStart && formatWithDate(state.ruleForm.passportValidStart) }}</div>
				<div>护照有效期止：{{ state.ruleForm.passportValidEnd && formatWithDate(state.ruleForm.passportValidEnd) }}</div>
			</div>
			<div class="row">
				<div>护照个人信息页：</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">任职信息</el-text>
			</el-space>
			<div class="row">
				<div>任职身份：{{ state.ruleForm.positionIdentity }}</div>
				<div>职位工种：{{ state.ruleForm.positionType }}</div>
				<div>职位级别：{{ state.ruleForm.positionLevel }}</div>
			</div>
			<div class="row">
				<div>部门：{{ state.ruleForm.dep }}</div>
				<div>职务：{{ state.ruleForm.positionJob }}</div>
				<div>基础薪资：{{ state.ruleForm.baseSalary }}</div>
			</div>
			<div class="row">
				<div>入职日期：{{ state.ruleForm.joinedDate && formatWithDate(state.ruleForm.joinedDate) }}</div>
				<div>转正日期：{{ state.ruleForm.confirmationDate && formatWithDate(state.ruleForm.confirmationDate) }}</div>
				<div>离职日期：{{ state.ruleForm.terminationDate && formatWithDate(state.ruleForm.terminationDate) }}</div>
			</div>
			<div class="row">
				<div>离职性质：{{ state.ruleForm.terminationNature && formatWithDate(state.ruleForm.terminationNature) }}</div>
				<div>离职日期：{{ state.ruleForm.terminationDate && formatWithDate(state.ruleForm.terminationDate) }}</div>
				<div>督导：{{ state.ruleForm.supervision }}</div>
			</div>
			<div class="row">
				<div>说明：{{ state.des }}</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">通讯方式</el-text>
			</el-space>
			<div class="row">
				<div>联系电话：{{ state.ruleForm.phone }}</div>
				<div>电子邮箱：{{ state.ruleForm.email }}</div>
				<div>紧急联系人：{{ state.ruleForm.emergencyContact }}</div>
			</div>
			<div class="row">
				<div>与紧急联系人关系：{{ state.ruleForm.emergencyConnect }}</div>
				<div>紧急联系人电话：{{ state.ruleForm.emergencyPhone }}</div>
				<div>家庭住址：{{ state.ruleForm.homeAddress }}</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">社保公积金</el-text>
			</el-space>
			<div class="row">
				<div>社保编号：{{ state.ruleForm.socialNumber }}</div>
				<div>户籍性质：{{ state.householdNature }}</div>
				<div>参保城市：{{ state.ruleForm.securityCity }}</div>
			</div>
			<div class="row">
				<div>社保参保方案：{{ state.ruleForm.securityMethod }}</div>
				<div>社保参保日期：{{ state.ruleForm.securityDateStart && formatWithDate(state.ruleForm.securityDateStart) }}</div>
				<div>社保停保日期：{{ state.ruleForm.securityDateEnd && formatWithDate(state.ruleForm.securityDateEnd) }}</div>
			</div>
			<div class="row">
				<div>公积金缴存基数：{{ state.ruleForm.accumulationBase }}</div>
				<div>社公积金起缴日期：{{ state.ruleForm.accumulationDateStart && formatWithDate(state.ruleForm.accumulationDateStart) }}</div>
				<div>公积金停缴日期：{{ state.ruleForm.accumulationDateEnd && formatWithDate(state.ruleForm.accumulationDateEnd) }}</div>
			</div>
			<div class="row">
				<div>公积金账号：{{ state.ruleForm.accumulationAccount }}</div>
				<div>开户行：{{ state.ruleForm.bankName }}</div>
				<div>银行卡号：{{ state.ruleForm.bankNumber }}</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">学历信息</el-text>
			</el-space>
			<div class="row">
				<div>学历：{{ state.levelEducation }}</div>
				<div>毕业院校：{{ state.ruleForm.graduationSchool }}</div>
				<div>专业：{{ state.ruleForm.major }}</div>
			</div>
			<div class="row">
				<div>毕业时间：{{ state.ruleForm.graduationDate && formatWithDate(state.ruleForm.graduationDate) }}</div>
				<div>毕业证书（附件）：</div>
				<div>技能等级证书：</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">协议信息</el-text>
			</el-space>
			<div class="row">
				<div>协议签订时间：{{ state.ruleForm.dealSignDate && formatWithDate(state.ruleForm.dealSignDate) }}</div>
				<div>协议截止日期：{{ state.ruleForm.dealEndDate && formatWithDate(state.ruleForm.dealEndDate) }}</div>
				<div>劳动合同（附件）：</div>
			</div>
			<div class="row">
				<div>保密协议（附件）：</div>
				<div>竞业协议（附件）：{{ state.ruleForm.dealEndDate && formatWithDate(state.ruleForm.dealEndDate) }}</div>
				<div>应聘简历（附件）：</div>
			</div>
			<div class="row">
				<div>入职体检报告（附件）：</div>
			</div>
			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">评审记录</el-text>
			</el-space>
			<editable
				:disabled="true"
				:tableSourceData="JSON.parse(state.ruleForm.reviewRecords)"
				:columns="recordTableConfig.columns"
				:rules="recordTableConfig.rules"
			/>

			<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
				<el-text tag="b">账户信息</el-text>
			</el-space>
			<editable
				:disabled="true"
				:tableSourceData="JSON.parse(state.ruleForm.accountInfo)"
				:columns="accountTableConfig.columns"
				:rules="accountTableConfig.rules"
			/>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="editStaff">
import { reactive, ref, getCurrentInstance } from 'vue';
import editable from './editTable.vue';
import { formatWithDate } from '@/utils/util';

const props = defineProps({
	title: {
		type: String,
		default: () => '',
	},
});

const { proxy } = getCurrentInstance() as any;
const imageUrl = ref('');
const recordTableConfig = {
	columns: [
		{
			label: '记录编号',
			prop: 'recordNumber',
			type: 'isInput',
		},
		{
			label: '记录类型',
			prop: 'reviewType',
			type: 'isInput',
		},
		{
			label: '记录结果',
			prop: 'reviewResult',
			type: 'isInput',
		},
		{
			label: '记录日期',
			prop: 'reviewDate',
			type: 'isDate',
		},
	],
	rules: {
		recordNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
		reviewType: [{ required: true, message: '请输入类型', trigger: 'blur' }],
		reviewResult: [{ required: true, message: '请输入记录结果', trigger: 'blur' }],
		reviewDate: [{ required: true, message: '请选择记录日期', trigger: 'blur' }],
	},
};
const accountTableConfig = {
	columns: [
		{
			label: '平台名称',
			prop: 'systemName',
			type: 'isInput',
		},
		{
			label: '账户名',
			prop: 'accountName',
			type: 'isInput',
		},
		{
			label: '密码',
			prop: 'password',
			type: 'isInput',
		},
		{
			label: '备注',
			prop: 'remark',
			type: 'isInput',
		},
	],
	rules: {
		systemName: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
		accountName: [{ required: true, message: '请输入类型', trigger: 'blur' }],
		password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	},
};
const state = reactive({
	// 是否显示弹出层
	isShowDialog: false,
	loading: false,
	depOptions: [], // 部门列表
	dep: {}, // 选择的部门
	recordList: [], // Review records
	accountList: [], // 账户信息列表
	des: '', // 说明
	ruleForm: {
		validStart: '',
		accountName: '',
		accumulationAccount: '',
		accumulationBase: undefined,
		accumulationDateEnd: undefined,
		accumulationDateStart: undefined,
		bankName: '',
		bankNumber: '',
		baseSalary: undefined,
		birthday: undefined,
		competeDeal: '',
		confidentialityDeal: '',
		confirmationDate: undefined,
		dealEndDate: undefined,
		dealSignDate: undefined,
		organizationId: undefined,
		departmentName: '',
		des: '',
		diploma: '',
		email: '',
		emergencyConnect: '',
		emergencyContact: '',
		emergencyPhone: '',
		graduationDate: undefined,
		graduationSchool: '',
		homeAddress: '',
		householdNature: undefined,
		id: undefined,
		idBack: '',
		idCard: '',
		idFront: '',
		id_type: undefined,
		joinedDate: undefined,
		laborContract: '',
		levelCertificate: undefined,
		levelEducation: undefined,
		major: '',
		isMarriage: undefined,
		name: '',
		nation: '',
		passportImg: '',
		passportName: '',
		passportNumber: '',
		passportValidEnd: '',
		passportValidStart: '',
		password: '',
		phone: '',
		politicalOutlook: '',
		positionIdentity: '',
		positionJob: '',
		positionLevel: '',
		positionStatus: undefined,
		positionType: '',
		recordNumber: '',
		registeredAddress: '',
		remark: '',
		resume: '',
		reviewDate: undefined,
		reviewResult: '',
		reviewType: undefined,
		securityCity: '',
		securityDateEnd: undefined,
		securityDateStart: undefined,
		securityMethod: undefined,
		sex: '',
		socialNumber: '',
		supervision: '',
		systemName: '',
		terminationDate: undefined,
		terminationNature: undefined,
		terminationReason: '',
		validEnd: '',
	},
	// 字典值，详情匹配用
	sex: '',
	isMarriage: '',
	idType: '',
	householdNature: '',
	levelEducation: '',
	positionStatus: '',
	// householdNatureOptions字典数据
	householdNatureOptions: [],
	// idTypeOptions字典数据
	idTypeOptions: [],
	// levelEducationOptions字典数据
	levelEducationOptions: [],
	// marriageOptions字典数据
	marriageOptions: [],
	// positionStatusOptions字典数据
	positionStatusOptions: [],
	// sexOptions字典数据
	sexOptions: [],
});

// 打开弹窗
const openDialog = (row: any) => {
	const newRow = JSON.parse(JSON.stringify(row));
	console.log('newRow.reviewRecords', newRow.reviewRecords);
	console.log('newRow.accountInfo', newRow.accountInfo);

	state.ruleForm = newRow;
	state.recordList = (newRow.reviewRecords && JSON.parse(newRow.reviewRecords)) || [];
	state.accountList = (newRow.accountInfo && JSON.parse(newRow.accountInfo)) || [];
	state.des = newRow.des && JSON.parse(newRow.des).text;
	state.isShowDialog = true;
	state.loading = false;
	proxy.getDicts('hr_household_nature').then((response: any) => {
		state.householdNatureOptions = response.data;
		state.householdNature = response.data.find((item: any) => item.dictValue == newRow.householdNature)?.dictLabel;
	});
	proxy.getDicts('hr_id_type').then((response: any) => {
		state.idTypeOptions = response.data;
		state.idType = response.data.find((item: any) => item.dictValue == newRow.idType)?.dictLabel;
	});
	proxy.getDicts('hr_level_education').then((response: any) => {
		state.levelEducationOptions = response.data;
		state.levelEducation = response.data.find((item: any) => item.dictValue == newRow.levelEducation)?.dictLabel;
	});
	proxy.getDicts('hr_is_marriage').then((response: any) => {
		state.marriageOptions = response.data;
		state.isMarriage = response.data.find((item: any) => item.dictValue == newRow.isMarriage)?.dictLabel;
	});
	proxy.getDicts('hr_position_status').then((response: any) => {
		state.positionStatusOptions = response.data;
		state.positionStatus = response.data.find((item: any) => item.dictValue == newRow.positionStatus)?.dictLabel;
	});
	proxy.getDicts('sys_user_sex').then((response: any) => {
		state.sexOptions = response.data;
		state.sex = response.data.find((item: any) => item.dictValue == newRow.sex)?.dictLabel;
	});
};
// 关闭弹窗
const closeDialog = (row?: object) => {
	proxy.mittBus.emit('onEditStaffModule', row);
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

defineExpose({
	openDialog,
});
</script>

<style scoped>
/deep/.el-dialog {
	border-radius: 0 !important;
}
.row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;

	div {
		width: 33.33%;
	}
}
.avatar-uploader .avatar {
	width: 78px;
	height: 78px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 78px;
	height: 78px;
	text-align: center;
}
</style>
